<div class="row animate fadeIn">
    <div class="form-horizontal">
        <form id="edit_list_form"  method="post">
    <div class="ibox-title" style="border:none;"><h5 style="color: #00afef"><i>Edit</i></h5>
      <?php foreach ($list_data AS $list) {?>
        <input type="hidden" id="e_list_id" name="edit_list_id" value="<?php echo $list->list_id; ?>">
        <div class="ibox-tools">
             <button class="btn btn-primary btn-sm save-btn-tab" id="submit-uom">Save</button>
             <a id="cancel_edit" class="btn btn-sm btn-outline btn-info cancel-btn-tab">Cancel</a>
        </div>
     </div>
     <div class="ibox-content">
            <div class="form-group">
                <label class="col-lg-2 control-label">List Name</label>
                <div class="col-lg-5">
                    <input type="text" id="" class="form-control" name="edit_list_name" value="<?php echo $list->list_name; ?>">
                </div>
                <input type="hidden" name="company_id" value="1">
             </div>
             <div class="form-group">
                <label class="col-lg-2 control-label">Description</label>
                <div class="col-lg-5">
                    <input type="text" id=""class="form-control" name="edit_list_desc" value="<?php echo $list->description; ?>" >
                </div>
            </div>
            <?php }
?>
        </form>
    </div>
    </div>
    <!-- row for sequence add -->
    <div id="">
      <div id="" class="ibox-content">
        <h3 style="color: #00afef">Sequence List</h3>
          <form  id="e_sequence-form" class="form-inline">
              <input type="hidden" id="c_id" name="c_list_id">
                  <table id="pgTable"class="table table-bordered" style="width:90%;">
                    <thead>
                      <tr>
                        <th style="width:80px;">Sequence</th>
                        <th style="width:170px;">Charge</th>
                        <th>Option</th>
                        <th style="width:70px;">Value</th>
                        <th style="width:80px;">Action</th>
                      </tr>
                      <tr>
                        <td style="margin:0px;padding:0px;">
                            <input style="width:100%; text-align: right" type="text" id="e_seq_num" name="seq_num" class="form-control-custom">
                        </td>
                        <td style="margin:0px;padding:0px;">
                            <select id="e_list_chg_code" class="chosen-select" name="list_code">
                                <option value=""> -- </option>
                                <?php foreach ($elements as $chg) {?>
                                    <option value="<?php echo $chg->charge_id; ?>"> <?php echo $chg->charge_name; ?> </option>
                                <?php }
?>
                            </select>
                        </td>
                        <td style="margin:0px;padding:0px;">
                            <select id="e_list_chg_opt" class="chosen-select" name="list_opt">
                            </select>
                        </td>
                        <td style="margin:0px;padding:0px;">
                            <input style="width:100%;text-align: right;" type="text" id="e_op_val"  name="opt_val"  class="form-control-custom" readonly>
                        </td>
                        <td style="margin:0px;padding:0px;">
                            <button style="width:100%;" class="btn btn-white" id="gana"><i class="fa fa-plus success"></i></button>
                        </td>
                      </tr>
                    </thead>
                    </form>
                    <tbody id="tbodydaw" class="animate fadeIn">

                    </tbody>
                  </table>
      </div>
    </div>
    <!-- end for row sequence -->
 </div>
 <input type="hidden" id="set" value="0">
 <script>
    $(document).ready(function(){
      $('#edit_list_form').data('serialize',$('#edit_list_form').serialize());
      $(".chosen-select").chosen({width:"100%;"});
      var l_id = $('#e_list_id').val();
      $('#c_id').val(l_id);
      var setter =0;

      function alert_cannot_edit(){
        swal({
                title: "Sorry!",
                text: "You still have inline edit , finish it first. ",
                type: "warning"
            });
      }
      $.ajax({
            type: "POST",
            url: "<?php echo base_url($this->session->userdata('forajax') . '/view_sequence'); ?>"+"/"+l_id,
            dataType: 'json',
        success: function(data){
              $('#tbodydaw').empty();
              var trHTML = '';
                  $.each(data, function(i, item) {
                      trHTML += '<tr><input id="e_line_id" type="hidden" value="'+ data[i].line_id +'"><input id="ed_list_id" type="hidden" value="'+ data[i].list_id +'"><td style="margin:0px;padding:0px;text-align:right;"><input style="width:100%;text-align: right;" class="form-control-custom" id="id_seq" type="hidden" value="'+ data[i].seq_num +'"><span id="d_span" style="margin-right:30px;">' + data[i].seq_num + '</span></td><td>' + data[i].charge_name + '</td><td>' + data[i].option_name + '</td><td>' + data[i].option_value + '</td><td style="margin:0px;padding:0px;"><a class="btn btn-outline btn-danger del" id="ok_x"><i id="del_icon" class="fa fa-times success"></i></a><a id="ok_e" class="btn btn-outline btn-info edit_l" id="gana"><i id="i_icon" class="fa fa-paste success"></i></a></td></tr>';
                      });
                  $('#tbodydaw').append(trHTML);
                }
            });
          $(document).on('click','.btn.btn-outline.btn-info.edit_l',function(){
                if(setter == 0){
                $(this).closest('tr').find('.btn.btn-outline.btn-info.save').show();
                $(this).closest('tr').find('#id_seq').attr('type','number');
                $(this).closest('tr').find('#d_span').hide();
                $(this).closest('tr').find('#i_icon').removeClass('fa fa-paste success');
                $(this).closest('tr').find('#i_icon').addClass('fa fa-check success');
                $(this).removeClass("btn btn-outline btn-info edit_l");
                $(this).addClass("btn btn-outline btn-info save");

                $(this).closest('tr').find('#ok_x').removeClass("btn btn-outline btn-danger del");
                $(this).closest('tr').find('#ok_x').addClass("btn btn-outline btn-warning cancel");
                $(this).closest('tr').find('#del_icon').removeClass('fa fa-times success');
                $(this).closest('tr').find('#del_icon').addClass('fa fa-undo success');
                setter = 1;
                }else{
                  alert_cannot_edit();
                }
          });
          $(document).on('click','.btn.btn-outline.btn-warning.cancel',function(){
            setter = 0; console.log("cancel : " + setter);
                var current_seq = $(this).closest('tr').find('#d_span').text();
                $(this).closest('tr').find('#id_seq').val(current_seq);
                $(this).closest('tr').find('#id_seq').attr('type','hidden');
                $(this).closest('tr').find('#d_span').show();
                $(this).closest('tr').find('#i_icon').removeClass('fa fa-check success');
                $(this).closest('tr').find('#i_icon').addClass('fa fa-paste success');
                $(this).closest('tr').find('#ok_x').removeClass("btn btn-outline btn-warning cancel");
                $(this).closest('tr').find('#ok_x').addClass("btn btn-outline btn-danger del");
                $(this).closest('tr').find('#ok_e').removeClass("btn btn-outline btn-info save");
                $(this).closest('tr').find('#ok_e').addClass("btn btn-outline btn-info edit_l");
                $(this).closest('tr').find('#del_icon').removeClass('fa fa-undo success');
                $(this).closest('tr').find('#del_icon').addClass('fa fa-times success');
          });
          $(document).on('click','.btn.btn-outline.btn-info.save',function(){

                var seq        = $(this).closest('tr').find('#id_seq').val();
                var line_id    = $(this).closest('tr').children('#e_line_id').val();
                var sad = $(this);
                $.ajax({
                  type: "POST",
                  url: "<?php echo base_url($this->session->userdata('forajax') . '/update_sequence'); ?>",
                  data: {"seq_num": seq , "line-id": line_id },
                  dataType: 'json',
              success: function(data){
                console.log("before: " + data[0].error);
                      if(data[0].error == 1){
                          notifymsg("danger",data[0].msg);
                        }else{
                          $(sad).closest('tr').find('#id_seq').val(seq);
                          $(sad).closest('tr').find('#d_span').text(seq);
                          $(sad).closest('tr').find('#id_seq').attr('type','hidden');
                          $(sad).closest('tr').find('#d_span').show();
                          $(sad).closest('tr').find('#i_icon').removeClass('fa fa-check success');
                          $(sad).closest('tr').find('#i_icon').addClass('fa fa-paste success');
                          $(sad).removeClass("btn btn-outline btn-info save");
                          $(sad).addClass("btn btn-outline btn-info edit_l");

                          $(sad).closest('tr').find('#ok_x').removeClass("btn btn-outline btn-warning cancel");
                          $(sad).closest('tr').find('#ok_x').addClass("btn btn-outline btn-danger del");
                          $(sad).closest('tr').find('#del_icon').removeClass('fa fa-undo success');
                          $(sad).closest('tr').find('#del_icon').addClass('fa fa-times success');
                          setter = 0;
                        }
                      }
                  });
          });

          $(document).on('click','.btn.btn-outline.btn-danger.del',function(){
              var sad = $(this);
              var line_id    = $(this).closest('tr').children('#e_line_id').val();
              var list_id    = $(this).closest('tr').children('#ed_list_id').val();
              swal({
                title: "Are you sure?",
                text: "This line in sequence will be deleted !",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "Yes, delete it!",
                closeOnConfirm: false
            }, function (isConfirm) {
              if (isConfirm) {
                $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax') . '/delete_charge_list_seq'); ?>",
                        data: { "line-id": line_id , "list-id": list_id },
                        dataType: 'json',
                    success: function(data){
                        console.log(data);
                        if(data.length != 0){
                          if(data[0].error == 1){
                              notifymsg("danger",data[0].msg);
                          }else{
                          $('#tbodydaw').empty();
                           console.log("there should be a notification");
                          var trHTML = '';
                          notifymsg("success",". . .List Sequence Delete Successfully");
                          $.each(data, function(i, item) {
                            trHTML += '<tr><input id="e_line_id" type="hidden" value="'+ data[i].line_id +'"><input id="ed_list_id" type="hidden" value="'+ data[i].list_id +'"><td style="margin:0px;padding:0px;text-align:right;"><input style="width:100%;" class="form-control" id="id_seq" type="hidden" value="'+ data[i].seq_num +'"><span id="d_span" style="margin-right:30px;">' + data[i].seq_num + '</span></td><td>' + data[i].charge_name + '</td><td>' + data[i].option_name + '</td><td>' + data[i].option_value + '</td><td style="margin:0px;padding:0px;"><a class="btn btn-outline btn-danger del" id="ok_x"><i id="del_icon" class="fa fa-times success"></i></a><a id="ok_e" class="btn btn-outline btn-info edit_l" id="gana"><i id="i_icon" class="fa fa-paste success"></i></a></td></tr>';
                            });
                          $('#tbodydaw').append(trHTML);
                          }
                         }else{
                           $('#tbodydaw').empty();
                         } 
                      }
                    });
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
              }
            });
          });

      $('#e_list_chg_code').change(function(){
                    var id = $('#e_list_chg_code').val();
                    console.log(id);
                    $.ajax({
                    type: "POST",
                    url: "<?php echo base_url($this->session->userdata('forajax') . '/search_option'); ?>",
                    data: { "chg_elem_id" : id },
                    dataType: 'json',
                    success: function(e){
                        var counter = 0;
                        var tmp = "";
                        $.each(e, function(i, item) { counter++;
                            tmp += "<option value='"+e[i].option_code+"'>"+e[i].option_name+"</option>";
                        });
                        $('#e_list_chg_opt').html(tmp).trigger("chosen:updated");
                        if(counter != 0){
                            $('#e_op_val').val(e[0].option_value);
                        }else{
                            $('#e_op_val').val('');
                        }
                    }
                    });
                });
      $('#e_list_chg_opt').change(function(){
                    var code = $('#e_list_chg_opt').val();
                    //console.log(id);
                    $.ajax({
                    type: "POST",
                    url: "<?php echo base_url($this->session->userdata('forajax') . '/search_opt_val'); ?>",
                    data: { "opt_elem_code" : code },
                    dataType: 'json',
                    success: function(e){
                        var tmp = "";
                        $('#e_op_val').val(e[0].option_value);
                    }
                    });
                });
      $("#e_sequence-form").validate({
                rules:{
                  seq_num: {
                      required: true,
                      number: true
                  },
                  list_code: {
                      required: true
                  },
                  list_opt: {
                      required: true
                  }
                },
                submitHandler: function(form){
                    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax') . '/insert_charge_list_seq'); ?>",
                        data: $('#e_sequence-form').serialize(),
                        dataType: 'json',
                    success: function(data){
                        console.log(data);
                        if(data[0].error == 1){
                            notifymsg("danger",data[0].msg);
                        }else{
                        $('#tbodydaw').empty();
                         console.log("there should be a notification");
                        var trHTML = '';
                        notifymsg("success",". . .List Added Successfully");
                        $.each(data, function(i, item) {
                          trHTML += '<tr><input id="e_line_id" type="hidden" value="'+ data[i].line_id +'"><input id="ed_list_id" type="hidden" value="'+ data[i].list_id +'"><td style="margin:0px;padding:0px;text-align:right;"><input style="width:100%;" class="form-control" id="id_seq" type="hidden" value="'+ data[i].seq_num +'"><span id="d_span" style="margin-right:30px;">' + data[i].seq_num + '</span></td><td>' + data[i].charge_name + '</td><td>' + data[i].option_name + '</td><td align="right">' + data[i].option_value + '</td><td style="margin:0px;padding:0px;"><a class="btn btn-outline btn-danger del" id="ok_x"><i id="del_icon" class="fa fa-times success"></i></a><a id="ok_e" class="btn btn-outline btn-info edit_l" id="gana"><i id="i_icon" class="fa fa-paste success"></i></a></td></tr>';
                          });
                        $('#tbodydaw').append(trHTML);
                        $("#e_list_chg_code").val("").trigger("chosen:updated");
                        $("#e_list_chg_opt").empty().trigger("chosen:updated");
                        $('#e_sequence-form')[0].reset();
                          }
                      }
                    });
                 }
          });

          $("#edit_list_form").validate({
                 rules: {
                     edit_list_name: {
                         required: true,
                         lettersonly: true
                     }
                 }
                 ,
                 submitHandler: function(form){
                    dataString = $("#edit_list_form").serialize();
                    $.ajax({
                        type: "POST",
                        url: "<?php echo base_url($this->session->userdata('forajax') . '/update_charge_list'); ?>",
                        data: dataString,
                        dataType: 'json',
                    success: function(data){
                           if(data[0].error == 1){
                                notifymsg("danger",data[0].msg);
                               }else{
                               notifymsg("success",". . .Charge List Updated Successfully");
                               close_edit(); active_search();
                              }
                            }
                        });
                 }
             });
          function alert_cancel(){
            var setter = 0;
            if($('#e_seq_num').val() != "" || $('#e_list_chg_code').val() != ""){
                setter = 1;
            }
            if($('#edit_list_form').serialize()!=$('#edit_list_form').data('serialize')){
                setter = 1;
            }
            if(setter == 1){
                swal({
                    title: "Are you sure?",
                    text: "Your work will not be save",
                    type: "warning",
                    showCancelButton: true,
                    confirmButtonColor: "#DD6B55",
                    confirmButtonText: "Leave",
                    cancelButtonText: "Stay",
                    closeOnConfirm: true,
                    closeOnCancel: true },
                function (isConfirm) {
                    if (isConfirm) {
                        close_edit(); active_search();
                        notifymsg("hide","hide");
                    } else {
                        swal("Cancelled");
                    }
                });
                }else{
                close_edit(); active_search();
                notifymsg("hide","hide");
            }
        }
        $('#cancel_edit').click(function(){
            alert_cancel();
        });
        $('#editX').click(function(){
            alert_cancel();
        });
    });
 </script>